/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
//  * 1.1 准备查询参数对象
// 由于下面的查询参数后面筛选时候会发生改变,所以把它写到封装函数的外面
const queryObj = {
  status: '',//文章状态,1叫做待审核,2叫做审核通过的状态 空字符串代表全部
  channel_id: '',  //代表文章频道id,如果传入空字符串代表获取全部的频道
  page: 1,// 当前页码
  per_page: 2,//获取每一页的条数
}
let totalCount = 0//保存文章总条数
// 用于以后筛选和编辑都需要获取文章,所以我们封装一个函数
// * 1.2 获取文章列表数据 
async function setArtileList() {
  // 获取文章数据
  // 在请求里面不用写令牌请求头,因为我们在请求拦截器里面已经设置过了,复习一下,请求拦截器,在每一次请求之前,默认再次重新添加一次筛选,可将公共请求参数放在里面
  const res = await axios({
    url: '/v1_0/mp/articles',
    params: queryObj
  })

  console.log(res)
  // * 1.3 展示到指定的标签结构中,发现每一个tr对应一个数据
  // 遍历这个数组
  // 注意有的img可能没有封面,我们需要进行一个判断
  // 注意大括号里面不能用if豫剧
  try{
    const htmlstr = res.data.results.map(item =>
      `<tr>
             <td>
                  <img
                    src="${item.cover.type === 0 ? `https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500` : item.cover.images[0]}"
                    alt="">
                </td>
                <td>${item.title}</td>
                <td>${item.status === 1 ? `<span class="badge text-bg-primary">待审核</span>` : `<span class="badge text-bg-success">审核通过</span>`}
                </td>
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td data-id="${item.id}">
                  <i class="bi bi-pencil-square edit"></i>
                  <i class="bi bi-trash3 del"></i>
                </td>
              </tr>`
    ).join('')
    // console.log(htmlstr)
    // 将标签字符串插入到tobody里面
    document.querySelector('.art-list').innerHTML = htmlstr
    // * 3.1 保存并设置文章总条数
    totalCount = res.data.total_count
    // console.log(totalCount)
    document.querySelector('.total-count').innerHTML = `共${totalCount}条`
  } catch(error){
    console.dir(error)
  }
 
}
// 默认打开也页面进行一次函数调用
setArtileList()


/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
// * 2.1 设置频道列表数据
async function setChanleList() {
  const res = await axios({
    url: '/v1_0/channels',
    // 用async和await可以拿到返回成功的结果
  })
  // console.log(res);
  const htmlstr = `<option value="" selected>请选择文章频道</option>` + res.data.channels.map(item =>
    // console.log(item);
    // 这里需要注意当箭头函数大括号里面只有一个语句时,需要添加return语句,或者删掉大括号
    `<option value="${item.id}">${item.name}</option>`
  ).join('')
  //  将数组转换成字符串
  // console.log(htmlstr)
  // 插入表单中
  document.querySelector('.form-select').innerHTML = htmlstr
}
setChanleList()
// * 2.2 监听筛选条件改变，保存查询信息到查询参数对象

//  筛选条件并绑定在筛选查询参数身上
// 注意得到的是为数组
// 需要遍历
document.querySelectorAll('.form-check-input').forEach(radio => {
  // 给里面的所有元素循环绑定change事件
  radio.addEventListener('change', e => {
    // console.log(e.target.value);
    queryObj.status = e.target.value
  })
})
// 监听绑到频道上面的id
document.querySelector('.form-select').addEventListener('change', e => {
  queryObj.channel_id = e.target.value
  //  console.log(e.target.value);
})
// * 2.3 点击筛选时，传递查询参数对象到服务器
document.querySelector('.sel-btn').addEventListener('click', e =>
  setArtileList()
)


/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
// * 3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
// 首先给下一个的li绑定点击事件
document.querySelector('.next').addEventListener('click', e => {
  //  点击后，页码发生改变，并再次从服务器获取收据
  // 首先需要对页面页码临界值进行来判断,页码数小于数据总数除以每一页显示的数据,并且向上取整
  if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
    // 让当前页码数进行加加
    queryObj.page++
    // 将数据传给服务器,调用封装的数据获取函数
    setArtileList()
    // 将页面当前页数进行修改
    document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
  }
})
// * 3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
// 首先给上一个小li绑定点击事件
document.querySelector('.last').addEventListener('click', e => {
  // 点击后页码发生改变并再次从服务器获取数据
  // 首先需要对页码临界值进行判断,页码数大于1
  if (queryObj.page > 1) {
    // 让页码进行自减
    queryObj.page--
    // 将数据传递給服务器,并用封装函数获取数据
    setArtileList()
    // 将当前页码进行修改
    document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
  }
})



/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示,注意这里时重新调用获取数据函数,如果只是单纯删除dom元素,则当前文章只会由一条数据
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去

// * 4.1 关联文章 id 到删除图标
// 提交数据时,服务器会放回一个id,是该文章id,拿到次id进行操作
// 首先先把对应的文章id关联到删除图标身上
// * 4.2 点击删除时，获取文章 id
// 采用事件委托的方法
// 给已存在的元素绑定点击事件
document.querySelector('.art-list').addEventListener('click', async e => {
  // 判断点击的时删除元素
  if (e.target.classList.contains('del')) {
    // console.log(1);
    // 获取删除键的id
    const delId = e.target.parentNode.dataset.id
    // console.log(delId);
    // * 4.3 调用删除接口，传递文章 id 到服务器
    // 请求头不用设置，在请求拦截器里面已经设置成功
    const res = await axios({
      url: `/v1_0/mp/articles/${delId}`,
      method: 'DELETE'
    })
      // * 4.5 删除最后一页的最后一条，需要自动向前翻页
      // 获取表格里面的dom元素
      const children=document.querySelector('.art-list').children
      // 做一个判断，如果数组里面的元素为1，且当前配置页码不为1
      if(children.length===1&&queryObj.page!==1){
        queryObj.page--
        document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
      }

    console.log(res);
    //  * 4.4 重新获取文章列表，并覆盖展示, 注意这里时重新调用获取数据函数, 如果只是单纯删除dom元素, 则当前文章只会由一条数据
    setArtileList()
  }
})
// 注意删除的时候由一个小bug，在删除最后一个元素的时候，如果将最后一页删完了，就变成空白页面了
// 做一个判断，如果当前页面dom元素只剩下一条，让当前页码--
// 注意当前页码为1时，不能继续像前面翻页
// 重新设置页码数，获取最新列表



// 内容管理，编辑文章，回显
// 步骤如下
// 1，页面跳转传参数
// 2，发布文章接受参数判断
// 3，修改文章标题，和按钮文字
// 4，获取文章详情数据并回显文章

// 点击编辑的时候，获取文章id，跳转到发布文章页面，传递文章id过去
document.querySelector('.art-list').addEventListener('click',e=>{
  if (e.target.classList.contains('edit')){
      // 如果符合条件就获取正在编辑的文章id
    const artId = e.target.parentNode.dataset.id
    console.log(artId)
    // 点击按钮跳转到发布文章页面
    location.href = `../publish/index.html?id=${artId}`

    // 把正在编辑id传过去，直接在跳转上面传递文章id

    


  }
})


